<template>
	<view class="xy-share">
		
		<!-- 二维码弹窗 -->
		<block>
			<view class="xy-modal-box xy-modal-box-center device-model-box br-10" :class="[showPoster&&posterImage?'xy-modal-show':'']">
				<view class="poster-img-box"><image class="poster-img" :src="posterImage" mode="widthFix"></image></view>
<!--				<view class="flex p-b-30" v-show="posterImage">-->
<!--					<button class="pbtn ts-24 tc-w " @tap="saveImage">保存二维码</button>-->
<!--				</view>-->
			</view>
			<view class="xy-modal-mask" :class="[showPoster?'xy-mask-show':'']" @tap="showPoster = !showPoster"></view>
		</block>
		
		<!-- 分享按钮 -->
		<view class="xy-modal-box bottom-fixed xy-modal-box-bottom share-btn-model-box ovh" :style="'background-color: #f7f7f7;'" :class="[showShare?'xy-modal-show':'']" @tap="showShare = false">
			<view class="share-box bg-w">
				<view class="share-list-box flex p-t-50 p-b-30">
					<!-- #ifdef MP-WEIXIN -->
					<button class="share-btn" open-type="share">
						<image class="share-img" :src="$xyfun.image('/static/images/share_wx.png')" />
						<view class="share-title ts-28" :style="'color:#333333;'">微信好友</view>
					</button>
					<!-- #endif -->

					<button class="share-btn" @tap="onPoster">
						<image class="share-img" :src="$xyfun.image('/static/images/share_poster.png')" />
						<view class="share-title ts-28 lh-28 m-t-20" :style="'color:#333333;'">生成二维码</view>
					</button>
				</view>
				<view class="share-foot tc p-30 bl-t" @tap="showShare = false" :style="'color:#808080;'+'border-color:#f7f7f7;'">取消</view>
			</view>
		</view>
		<view class="xy-modal-mask" :class="[showShare?'xy-mask-show':'']" @tap="showShare =!showShare"></view>


	</view>
</template>
<script>


import { mapState } from 'vuex';
import $platform from '@/utils/platform';
import xyCanvas from '@/components/xy-canvas';
import xyfun from '../../utils/xyfun';
export default {
	name: 'xyShare',
	components: {
		xyCanvas
	},
	data() {
		return {

			shareConfig: {},
			showPoster: false,
			platform: $platform.get(),
			posterImage: '',
			canvasParams: {}
		};
	},
	props: {
		posterType: {
			type: String,
			default: ''
		},
		posterInfo: {
			type: Object,
			default: () => {}
		},
		value: {}
	},
	computed: {
		...mapState(['user','common']),
		showShare: {
			get(val) {
				return val.value;
			},
			set(val) {
				this.$emit('input', val);
			}
		}
	},
	methods: {
		// 开始绘制
		onPoster() {
      let shareConfig = this.common.shareConfig;
			if (this.user.isLogin) {
				this.showPoster = true;
        this.posterImage = `${this.$xyfun.http_config('api_url')}/wechat/wxacode?spm=${shareConfig.spm}`;
			} else {
				this.$xyfun.toLogin();
			}
			this.showShare = false;
		},

		// 保存图片
		async saveImage() {
			var that = this;
      this.downloadFile(that.posterImage);
		},

    // 保存图片
    downloadFile(files){
      var that = this;
      uni.downloadFile({
        url: this.$xyfun.image(files), //仅为示例，并非真实的资源
        success: (res) => {
          console.log(res)
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath : res.tempFilePath,
              success(res1){
                that.$xyfun.msg('保存成功');
              }
            })
          }
        }
      });
    }
	}
};
</script>

<style lang="scss">
  .poster-img-box{
    padding: 50rpx;
    .poster-img{
      width: 550rpx;
      height: 550rpx;
    }
  }
	.share-box {
		.share-btn {
			background: none;
			&::after {
				border: none;
				padding: 0;
			}
			padding: 0;
			.share-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}
	}

  .pbtn {
    width: 220rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: #07c060;
  }

  button{
    line-height: unset;
    height: unset;
  }
</style>
